<template>
  <div class="container">
    <div
      class="exam_content rela"
      :style="{ height: outHeight }"
      v-loading="loading"
    >
      <!--   题目列表   -->
      <div class="answer_sheet" v-if="showSheet">
        <div class="answer_sheet_title">
          <span>题目列表</span>
          <i
            @click="showSheet = false"
            class="el-icon-s-operation color_aqua"
          ></i>
        </div>
        <div class="sheet_question_list">
          <div
            v-for="(item, index) in formatObj.examPaperTitleList"
            :key="index"
          >
            <a @click="scrollToAnchor(item, 1)" class="sheet_question_item"
              >{{ item.title }}
              <span class="paperTitle ml10">共{{ item.topicNum }}题</span>
            </a>
            <!--     答题详情       -->
            <div class="sheet_answer_collect">
              <div
                v-for="(childItem, childIndex) in item.topicList"
                :key="childIndex"
              >
                <!--   答错题    -->
                <div
                  @click="scrollToAnchor(childItem, 2)"
                  v-if="childItem.right == 0"
                  class="sheet_answer_collect_item fail_select"
                >
                  {{ childItem.sort }}
                </div>
                <!--   答对题    -->
                <div
                  @click="scrollToAnchor(childItem, 2)"
                  v-if="childItem.right == 1"
                  class="sheet_answer_collect_item selected"
                >
                  {{ childItem.sort }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--   main-top内容  答题   -->
      <div class="exam_content_top">
        <div class="title">
          {{ formatObj.examPaper ? formatObj.examPaper.title : "" }}
        </div>
        <div class="flex">
          <div
            style="
              font-size: 16px;
              font-weight: 500;
              color: #333333;
              margin: 10px 0 0 5px;
            "
          >
            姓名:{{ user.user ? user.user.nickName : "" }}
          </div>
          <div
            style="
              font-size: 16px;
              font-weight: 500;
              color: #333333;
              margin: 10px 0 0 20px;
            "
          >
            账号:{{ user.user ? user.user.phoneNumber : "" }}
          </div>
          <div
            style="
              font-size: 16px;
              font-weight: 500;
              color: #333333;
              margin: 10px 0 0 20px;
            "
          >
            及格分数:{{ formatObj.passingGrade ? formatObj.passingGrade : 0 }}分
          </div>
          <div
            style="
              font-size: 16px;
              font-weight: 500;
              color: #333333;
              margin: 10px 0 0 20px;
            "
          >
            成绩:{{ scoreGot ? scoreGot : 0 }} /
            {{ formatObj.totalScore ? formatObj.totalScore : 0 }}
          </div>
        </div>
        <div
          style="
            font-size: 16px;
            font-weight: 500;
            color: #333333;
            margin: 3px 0 0 5px;
          "
        >
          大区-门店-岗位:{{
            user.regionSchoolPostNames
              ? user.regionSchoolPostNames.join(",")
              : ""
          }}
        </div>
      </div>
      <div class="all_exam_connect" :style="{ height: inHeight }">
        <!--   main-connect内容   -->
        <div
          class="exam_list"
          v-for="(item, index) in formatObj.examPaperTitleList"
          :key="index"
        >
          <div :id="item.titleId" class="paperTitle_left">
            {{ item.title }}
            <span class="paperTitle"
              >(共{{ item.topicNum }}题，{{ item.score }}分)</span
            >
          </div>
          <div
            class="answer_question"
            v-for="(childItem, childIndex) in item.topicList"
            :key="childIndex"
          >
            <span :id="childItem.id">{{ childItem.sort }}</span
            >.
            <span class="question_type">{{
              topicType[childItem.topicType]
            }}</span
            >&nbsp;
            <span
              ><span
                style="white-space: pre-wrap"
                v-html="childItem.topicContent"
              ></span
              >({{ topicType[childItem.topicType] }},{{
                childItem.score
              }}分)</span
            >
            <div v-if="childItem.topicPic" class="topic_image">
              <el-image
                v-for="(
                  topicPicitem, topicPicindex
                ) in childItem.topicPic.split(',')"
                style="
                  width: auto !important;
                  height: 100px;
                  margin-right: 10px;
                  margin-bottom: 10px;
                "
                :src="topicPicitem"
                :key="topicPicindex"
                :preview-src-list="childItem.topicPic.split(',')"
              >
              </el-image>
            </div>
            <div class="item_answer">
              <!--    填空题部分        -->
              <div v-if="childItem.topicType == 3">
                <div
                  class="optionItem"
                  v-for="(optionItem, optionIndex) in childItem.optionCount"
                  :key="optionIndex"
                >
                  <span class="optionItem_label">{{ optionIndex + 1 }}.</span>
                  <el-input
                    v-input-restrict
                    disabled
                    clearable
                    class="optionItem_answer"
                    type="text"
                    placeholder="请输入答案"
                    v-model="childItem.multiAnswers[optionIndex]"
                  >
                  </el-input>
                </div>
                <!--     试题解析 只有批改过的详情和老师批改能看       -->
                <div class="resolve_exam">
                  <div
                    class="resolve_exam_label"
                    v-if="childItem.resolve || childItem.resolvePic"
                  >
                    试题解析：
                  </div>
                  <el-tag class="resolve_exam_value" v-if="childItem.resolve">
                    {{ childItem.resolve }}
                  </el-tag>
                  <div
                    style="display: flex; align-items: center; flex-wrap: wrap"
                    v-if="childItem.resolvePic"
                  >
                    <el-image
                      v-for="(
                        resolvePicitem, resolvePicindex
                      ) in childItem.resolvePic.split(',')"
                      style="
                        width: auto !important;
                        height: 100px;
                        margin-left: 10px;
                        margin-bottom: 10px;
                      "
                      :src="resolvePicitem"
                      :key="resolvePicindex"
                      :preview-src-list="childItem.resolvePic.split(',')"
                    >
                    </el-image>
                  </div>
                </div>
              </div>
              <!--    单选题部分        -->
              <el-radio-group
                disabled
                v-if="childItem.topicType == 0"
                v-model="childItem.userAnswer"
              >
                <el-radio
                  v-for="(answerItem, answerIndex) in childItem.topicOptionList"
                  :key="answerIndex"
                  :label="answerItem.label"
                >
                  {{ answerItem.label }}、{{ answerItem.optionValue }}
                </el-radio>
              </el-radio-group>
              <!--    多选题部分        -->
              <el-checkbox-group
                disabled
                v-if="childItem.topicType == 1"
                v-model="childItem.multiAnswers"
              >
                <el-checkbox
                  v-for="(answerItem, answerIndex) in childItem.topicOptionList"
                  :key="answerIndex"
                  :label="answerItem.label"
                  >{{ answerItem.label }}、{{ answerItem.optionValue }}
                </el-checkbox>
              </el-checkbox-group>
              <!--    判断题部分        -->
              <el-radio-group
                disabled
                v-if="childItem.topicType == 2"
                v-model="childItem.userAnswer"
              >
                <el-radio :label="'正确'">对</el-radio>
                <el-radio :label="'错误'">错</el-radio>
              </el-radio-group>
              <!--      简答题部分      -->
              <el-input
                v-input-restrict
                disabled
                v-if="childItem.topicType == 4 || childItem.topicType == 5"
                class="textarea"
                type="textarea"
                :autosize="{ minRows: 3, maxRows: 4 }"
                placeholder="请输入答案"
                v-model="childItem.userAnswer"
              >
              </el-input>
              <!--  附件    -->
              <div
                class="attachment"
                v-if="childItem.topicType == 4 || childItem.topicType == 5"
              >
                <div>附图</div>
                <div class="pictures">
                  <!--     详情状态只可查看      -->
                  <div style="display: flex; flex-wrap: wrap">
                    <!--     有附图信息遍历展示        -->
                    <div
                      class="view_img"
                      v-for="(item, index) in childItem.echoFile"
                      :key="index"
                    >
                      <el-image
                        v-if="item.type == 1"
                        class="view_img_url"
                        :src="item.url"
                        :key="index"
                        :preview-src-list="[item.url]"
                      >
                      </el-image>
                      <div v-if="item.type == 2" class="video_box">
                        <img
                          class="video_img"
                          src="@/assets/images/video_img.png"
                          alt=""
                        />
                        <video-review
                          class="video_box"
                          ref="videoReview"
                          :videoSrc="item.url"
                        ></video-review>
                      </div>
                      <div
                        @click="lookFiles(item.url)"
                        v-if="item.type == 3 || item.type == 4"
                        class="other_box"
                      >
                        <i class="el-icon-document"></i>
                        <el-tooltip
                          class="item"
                          effect="dark"
                          :content="item.name"
                          placement="top"
                        >
                          <div class="other_text">
                            <span>{{ item.name }}</span>
                            {{
                              item.name.slice(
                                item.name.lastIndexOf("."),
                                item.name.length
                              )
                            }}
                          </div>
                        </el-tooltip>
                      </div>
                    </div>
                    <!--     没有附图信息        -->
                    <div v-if="childItem.echoFile.length == 0">
                      暂无附图信息
                    </div>
                  </div>
                </div>
              </div>
              <!--     试题解析 只有批改过的详情和老师批改能看      -->
              <div class="resolve_exam">
                <div
                  class="resolve_exam_label"
                  v-if="childItem.resolve || childItem.resolvePic"
                >
                  试题解析：
                </div>
                <el-tag class="resolve_exam_value" v-if="childItem.resolve">
                  {{ childItem.resolve }}
                </el-tag>
                <div
                  style="
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    justify-content: flex-start;
                  "
                  v-if="childItem.resolvePic"
                >
                  <el-image
                    v-for="(item3, index3) in childItem.resolvePic.split(',')"
                    style="
                      width: auto !important;
                      height: 100px;
                      margin-left: 10px;
                      margin-bottom: 10px;
                    "
                    :src="item3"
                    :key="index3"
                    :preview-src-list="childItem.resolvePic.split(',')"
                  >
                  </el-image>
                </div>
              </div>
              <!--     教师审批       -->
              <div class="teacher_approval_all">
                <div
                  class="teacher_approval"
                  v-if="needHidden.indexOf(childItem.topicType) == -1"
                >
                  <span class="scoreget_label">得分:</span>
                  <el-input
                    v-input-restrict
                    size="small"
                    class="remake"
                    placeholder="请输入得分"
                    @input="onInput($event, childItem)"
                    v-model="childItem.scoreGot"
                    type="text"
                  >
                  </el-input>
                </div>
              </div>
              <div
                v-if="childItem.topicType == 4 || childItem.topicType == 5"
                class="teacher_approval_remoke"
              >
                <!--     批注只有简答题有       -->
                <span class="scoreget_label">批注:</span>
                <el-input
                  v-input-restrict
                  class="remake_approval"
                  type="textarea"
                  :autosize="{ minRows: 3, maxRows: 4 }"
                  placeholder="请输入批注"
                  v-model="childItem.teacherRemark"
                >
                </el-input>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--  提交按钮    -->
      <div class="btns_operation abso">
        <!-- <el-button @click="submitNext" class="operation_btn" type="primary"
          >下一份
        </el-button> -->
        <el-button @click="submitApproval" class="operation_btn" type="primary"
          >提交
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import uploadFile from "@/components/uploadFile/uploadFile";
import videoReview from "@/components/videoReview/videoReview";
import { getNextExamPaper } from "@/api/home/message";
import { approvalAnswer } from "@/api/exam/actionExam";
import { getPost_user } from "@/api/schoolOrganization/student";
export default {
  name: "examinationAnswer",
  components: {
    uploadFile,
    videoReview,
  },
  props: {
    examInfo: {
      type: [Object],
      default: {},
    },
    msgInfo: {
      type: [Object],
      default: {},
    },
    titleName: {
      type: [String],
      default: "",
    },
    loading: {
      type: [Boolean],
      default: true,
    },
    outHeight: {
      type: [String],
      default: "calc(100vh - 134px )",
    },
    inHeight: {
      type: [String],
      default: "calc(100vh - 294px )",
    },
  },
  watch: {
    examInfo: {
      deep: true,
      handler(val) {
        this.getUserInfo();
        this.formatDataInfo(val);
      },
    },
    // 深度监听 formatObj.examPaperTitleList
    "formatObj.examPaperTitleList": {
      deep: true,
      handler(val) {
        let score = 0;
        for (let i = 0; i < val.length; i++) {
          for (let j = 0; j < val[i].topicList.length; j++) {
            score += parseFloat(val[i].topicList[j].scoreGot);
          }
        }
        console.log("formatObj.examPaperTitleList", val, score);
        this.scoreGot = score;
      },
    },
  },
  filters: {},
  data() {
    return {
      user: {},
      scoreGot: 0,
      needHidden: [0, 1, 2, 3],
      formatObj: {},
      showSheet: false,
      topicType: {
        0: "单选题 ",
        1: "多选题 ",
        2: "判断题",
        3: "填空题",
        4: "简答题",
        5: "操作题",
      },
      examTotal: 0,
      nextKeyId: "",
    };
  },
  async created() {},
  beforeDestroy() {},
  methods: {
    /* 限制输入打分 */
    onInput(event, item) {
      let value = event.replace(/[^0-9]/g, ""); // 只允许输入数字
      if (parseInt(value) > item.score) {
        // 确保输入值小于 childItem.scoreGot
        value = item.score.toString(); // 如果输入值大于 childItem.scoreGot，则使用 childItem.scoreGot
      }
      item.scoreGot = value; // 更新 childItem.scoreGot 的值
    },
    /* 获取用户信息 */
    async getUserInfo() {
      let res = await getPost_user(this.$route.query.userId);
      this.user = res;
    },
    lookFiles(url) {
      window.open(url);
    },
    //锚点跳转
    scrollToAnchor(item, type) {
      if (type == 1) {
        const anchor = document.getElementById(item.titleId);
        if (anchor) {
          anchor.scrollIntoView({ behavior: "smooth" });
        }
      } else {
        const anchor = document.getElementById(item.id);
        if (anchor) {
          anchor.scrollIntoView({ behavior: "smooth" });
        }
      }
    },
    //格式化数据
    formatDataInfo(val) {
      console.log("格式化数据");
      let examInfo = this.examInfo;
      let examArr = examInfo.examPaperTitleList;

      let formatArr = [];
      //试题总数
      let examTotal = 0;
      //遍历各个大题
      for (const examArrElement of examArr) {
        //计算试题总数
        examTotal += examArrElement.topicNum;
        //格式化题目数组新增两个键值对  userAnswer用于存放单选题答案   multiAnswers用于存放多选题答案（以及填空题）
        //遍历各个大题里的小题
        let topicList = [];
        for (const examArrElementElement of examArrElement.topicList) {
          let obj;
          //判断作答的题目有没有缓存
          if (examArrElementElement.topicAnswer) {
            obj = {
              //原来的数据不动，新增两个字段用与存放答案
              ...examArrElementElement,
              userAnswer: examArrElementElement.topicAnswer.answer,
              multiAnswers: examArrElementElement.topicAnswer.multiAnswers
                ? examArrElementElement.topicAnswer.multiAnswers
                : [],
              echoFile: [],
            };
            if (examArrElementElement.topicAnswer.fileInfo) {
              obj.echoFile = JSON.parse(
                examArrElementElement.topicAnswer.fileInfo
              );
            }
          } else {
            obj = {
              //原来的数据不动，新增两个字段用与存放答案
              ...examArrElementElement,
              userAnswer: "",
              multiAnswers: [],
              echoFile: [],
            };
          }
          topicList.push(obj);
        }
        let object = {
          ...examArrElement,
          topicList: topicList,
        };
        formatArr.push(object);
      }
      let formatObj = {
        ...examInfo,
        totalScore: examInfo.examPaper.totalScore,
        passingGrade: examInfo.examPaper.passingGrade,
        examPaperTitleList: formatArr,
      };
      this.formatObj = formatObj;
      console.log("formatObj", this.formatObj);
      this.examTotal = examTotal;
    },
    async submitNext() {
      let arr = [];
      for (const examPaperElement of this.formatObj.examPaperTitleList) {
        for (const argumentElement of examPaperElement.topicList) {
          if (this.needHidden.indexOf(argumentElement.topicType) == -1) {
            console.log("xxxxxxxx", argumentElement.scoreGot);
            if (
              argumentElement.scoreGot === null ||
              argumentElement.scoreGot === undefined ||
              argumentElement.scoreGot === ""
            ) {
              this.$modal.msgWarning(
                `请先对【第${argumentElement.sort}题】进行评分再提交`
              );
              const anchor = document.getElementById(argumentElement.id);
              if (anchor) {
                anchor.scrollIntoView({ behavior: "smooth" });
              }
              return;
            }
            if (argumentElement.scoreGot - 0 > argumentElement.score) {
              this.$modal.msgWarning(
                `【第${argumentElement.sort}题】得分大于该题目总分，请重新打分！`
              );
              const anchor = document.getElementById(argumentElement.id);
              if (anchor) {
                anchor.scrollIntoView({ behavior: "smooth" });
              }
              return;
            }
            let obj = {
              examPaperTopicId: argumentElement.id,
              right: argumentElement.right,
              score: argumentElement.scoreGot
                ? argumentElement.scoreGot - 0
                : 0,
              teacherRemark: argumentElement.teacherRemark,
            };
            arr.push(obj);
          }
        }
      }
      const loading = this.$loading({
        lock: true,
        text: "正在提交",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.6)",
      });

      let result = await approvalAnswer(arr);
      const { code } = result;
      if (code == 200) {
        loading.close();
        let res = await getNextExamPaper(this.$route.query.keyId);
        if (res.data.examPaper) {
          this.$modal.msgSuccess("提交成功！");
          this.nextKeyId = res.data.examPaper.id;
          this.$router.replace({
            name: "approvalAnswer",
            query: {
              // keyId就是考试试卷id
              keyId: this.nextKeyId,
            },
          });
        } else {
          this.$modal.msgSuccess("提交成功，当前试卷为最后一份~");
          this.$router.go(-1);
        }
      } else {
        loading.close();
      }
    },
    async submitApproval() {
      let arr = [];
      for (const examPaperElement of this.formatObj.examPaperTitleList) {
        for (const argumentElement of examPaperElement.topicList) {
          if (this.needHidden.indexOf(argumentElement.topicType) == -1) {
            console.log("xxxxxxxx", argumentElement.scoreGot);
            if (
              argumentElement.scoreGot === null ||
              argumentElement.scoreGot === undefined ||
              argumentElement.scoreGot === ""
            ) {
              this.$modal.msgWarning(`请先对【第${argumentElement.sort}题】`);
              const anchor = document.getElementById(argumentElement.id);
              if (anchor) {
                anchor.scrollIntoView({ behavior: "smooth" });
              }
              return;
            }
            if (argumentElement.scoreGot - 0 > argumentElement.score) {
              this.$modal.msgWarning(
                `【第${argumentElement.sort}题】得分大于该题目总分，请重新打分！`
              );
              const anchor = document.getElementById(argumentElement.id);
              if (anchor) {
                anchor.scrollIntoView({ behavior: "smooth" });
              }
              return;
            }
            let obj = {
              examPaperTopicId: argumentElement.id,
              right: argumentElement.right,
              score: argumentElement.scoreGot
                ? argumentElement.scoreGot - 0
                : 0,
              teacherRemark: argumentElement.teacherRemark,
            };
            arr.push(obj);
          }
        }
      }
      console.log(arr, "approvalAnswer");
      this.$emit("approvalAnswer", arr);
    },
    updateScore() {
      this.$message({
        type: "success",
        message: "修改成功",
        showClose: true,
        duration: 1500,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 24px 0;
  box-sizing: border-box;
  background: #f5f6f7;

  .exam_content {
    width: 1200px;
    border-radius: 16px;
    background: #ffffff;
    position: relative;

    .answer_sheet {
      width: 344px;
      box-shadow: 0 6px 14px 0 rgba(0, 55, 49, 0.1);
      border-radius: 0 16px 0 0;
      background: white;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 1;

      &_title {
        display: flex;
        justify-content: space-between;
        padding: 24px;
        width: 100%;
        box-sizing: border-box;
        border-bottom: 1px solid #f2f3f4;
        text-align: center;
        font-size: 18px;
        font-weight: 600;
        color: #333333;
      }

      .sheet_question_list {
        height: 60vh;
        overflow: auto;
        padding: 32px 24px;
        box-sizing: border-box;
        background: white;

        .sheet_question_item {
          display: inline-block;
          font-size: 14px;
          font-weight: 500;
          color: #333333;
          margin-bottom: 12px;
        }
      }
    }

    &_top {
      border-radius: 16px 16px 0 0;
      border-bottom: 1px solid #f1f3f3;
      padding: 24px 24px 10px 24px;
      box-sizing: border-box;
      width: 100%;

      .title {
        font-size: 18px;
        font-weight: 600;
        color: #333333;
      }

      .el-icon-s-operation {
        font-size: 18px;
        color: #727272;
        cursor: pointer;
      }

      .middle {
        display: flex;
        align-items: center;

        .progress {
          width: 120px;
          margin-left: 16px;
        }
      }
    }

    .exam_list {
      width: 100%;
      padding: 32px 64px;
      background: white;
      box-sizing: border-box;

      .answer_question {
        font-size: 14px;
        font-weight: 400;
        color: #333333;

        .item_answer {
          width: 100%;
          margin: 21px 0 41px;

          .textarea {
            width: 60%;
            font-size: 16px;
          }

          .attachment {
            width: 100%;
            padding: 25px 0 0;
            box-sizing: border-box;
            display: flex;

            &_sugest {
              font-size: 14px;
              font-weight: 400;
              color: #999999;
              margin-top: 16px;
            }

            .pictures {
              margin-left: 16px;
            }
          }
        }

        .question_type {
          color: #ef7d00;
        }
      }
    }

    .btns_operation {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 0 40px 20px 0;
      bottom: 0;
      box-sizing: border-box;

      .operation_btn {
        width: 100px;
        height: 40px;
      }
    }
  }
}

.upload_btn {
  width: 90px;
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #f5f5f5;
  cursor: pointer;
}

.el-icon-plus {
  font-size: 18px;
  font-weight: bold;
  color: #999999;
}

.upload_txt {
  margin-top: 8px;
  font-size: 10px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.65);
}

.paperTitle {
  font-size: 14px;
  font-weight: 500;
  color: #949494;
}

.paperTitle_left {
  font-size: 16px;
  font-weight: 500;
  color: #000000;
  margin-bottom: 16px;
}

.mt_10 {
  margin-top: 20px;
}

.sheet_answer_collect {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 12px;

  &_item {
    cursor: pointer;
    user-select: none;
    margin: 0 10px 10px 0;
    width: 36px;
    height: 36px;
    background: #ffffff;
    color: #999999;
    border-radius: 50%;
    border: 1px solid #28b28b;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.optionItem {
  display: flex;
  align-items: center;
  margin: 10px 0;

  &_label {
    font-size: 14px;
    font-weight: 400;
    color: #a0a09f;
  }

  &_answer {
    width: 256px;
    margin-left: 11px;
  }
}

.selected {
  background: #daf1ff;
  color: #03c4ff;
  border: 0;
}

.fail_select {
  background: #ffcfce;
  color: #e95756;
  border: 0;
}

.color_red {
  color: red;
}

.color_green {
  margin-right: 40px;
  color: #09c1ae !important;
  cursor: pointer;
}

.color_aqua {
  color: #09c1ae !important;
  cursor: pointer;
}

.submited_state_top {
  border-radius: 16px 16px 0 0;
  padding: 16px 0;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .submited_img {
    width: 32px;
    height: 32px;
    object-fit: cover;
  }

  .submited_text {
    font-size: 18px;
    font-weight: 600;
    margin-left: 20px;
  }
}

.state_color_green {
  color: #28b28b;
}

.state_color_red {
  color: #d81e06;
}

.state_color_light_green {
  color: #19b300;
}

.bg_color_green {
  background: #cdf2ef;
}

.bg_color_red {
  background: #fbdddd;
}

.bg_color_light_green {
  background: #d2f2cd;
}

::v-deep .makeup_examination {
  width: 112px;
  height: 32px;
  background: #e95756 !important;
  border-radius: 20px !important;
  line-height: 12px;
  color: #ffffff;
}

::v-deep .el-statistic .con .number {
  font-size: 16px;
  margin-left: -14px;
}

.makeup_examination {
  position: absolute;
  right: 116px;
}

//checkBox自定义禁用样式
//::v-deep .el-checkbox__input.is-disabled + .el-checkbox__label {
//  color: #808080 !important;
//}
//
//::v-deep .el-checkbox__input.is-disabled.is-checked + .el-checkbox__label {
//  color: #1890ff !important;
//}
//
//::v-deep .el-checkbox__input .is-disabled .el-checkbox__inner {
//  background-color: #1890ff !important;
//  border-color: #1890ff !important;
//}
.el-icon-warning {
  color: #faad14;
  font-size: 24px;
  margin-right: 8px;
}

.toptip {
  font-size: 16px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
}

.fail_answered {
  font-size: 14px;
  font-weight: 400;
  color: #e95756;
}

.right_answered {
  margin-left: 8px;
  font-size: 14px;
  font-weight: 400;
}

.color_black {
  color: #333333;
  margin-left: 40px;
}

.view_img {
  width: auto !important;
  height: 90px;
  margin-left: 12px;
  margin-bottom: 12px;
  position: relative;
}

.view_img_url {
  width: auto !important;
  height: 100%;
}

.video_box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f5f5;
  cursor: pointer;
}

.other_box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #f5f5f5;
  cursor: pointer;

  .el-icon-document {
    font-size: 18px;
    color: #565656;
  }

  .other_text {
    margin-top: 10px;
    font-size: 12px;
    color: #565656;
    display: flex;
    align-items: center;

    span {
      display: inline-block;
      width: 50px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.video_img {
  width: 24px;
  height: 24px;
  object-fit: cover;
  position: absolute;
}

.teacher_approval {
  display: flex;
  align-items: center;
}

.approval_radio {
  margin-top: 4px;
}

.remake {
  width: 100px;
}

.scoreget_label {
  margin: 0 6px 0 20px;
}

.teacher_approval_all {
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.teacher_approval_remoke {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.remake_approval {
  width: 25%;
  font-size: 16px;
}

.resolve_exam {
  display: flex;
  margin-top: 10px;

  &_label {
    color: #333333;
    font-weight: bold;
  }

  &_value {
    color: #333333;
  }
}

.bg_orange {
  width: 100px;
  height: 32px;
  background: #fef4e9;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 16px;

  .countdown_img {
    margin-left: 12px;
    width: 24px;
    height: 24px;
    object-fit: cover;
  }

  .countdown_txt {
    font-size: 14px;
    font-weight: 400;
    color: #ef7d00;
  }
}

/* 修改滚动条样式 .title_state为div盒子*/
.sheet_question_list::-webkit-scrollbar {
  width: 4px;
  overflow-y: scroll;
  overflow-x: auto;
}

.sheet_question_list::-webkit-scrollbar-thumb {
  background: #e1e1e1;
  border-radius: 4px;
}

.sheet_question_list::-webkit-scrollbar-track {
  background: white;
}

/* 修改滚动条样式 .title_state为div盒子*/
.all_exam_connect::-webkit-scrollbar {
  width: 6px;
  overflow-y: scroll;
  overflow-x: auto;
}

.all_exam_connect::-webkit-scrollbar-thumb {
  background: #e1e1e1;
  border-radius: 4px;
}

.all_exam_connect::-webkit-scrollbar-track {
  background: white;
}

.all_exam_connect {
  width: 100%;
  overflow: auto;
}

.topic_image {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
}
</style>
